<script setup>
import {useRoute} from "vue-router";
import {ref} from "vue";
import {getOrderAPI} from "@/apis/pay.js";

const route = useRoute()
const orderInfo = ref({})

const getOrderInfo = async () => {
  const res = await getOrderAPI(route.query.id)
  orderInfo.value = res.result
}

getOrderInfo()
</script>

<template>
<div class="pay-page">
  <div class="container">
    <div class="pay-result">
      <el-icon v-if="$route.query.payResult === 'true'"><SuccessFilled /></el-icon>
      <el-icon v-else><WarningFilled/></el-icon>
      <p class="tit">支付{{ $route.query.payResult === 'true' ? '成功' : '失败' }}</p>
      <p class="tip">我们会尽快为您发货，收获期间请保持手机通畅</p>
      <p>支付方式：<span>支付宝</span></p>
      <p>支付金额：<span>￥{{orderInfo.payMoney?.toFixed(2)}}</span></p>
      <div class="btn">
        <el-button type="primary">查看订单</el-button>
        <el-button>进入首页</el-button>
      </div>
      <p class="alert">
        <span>温馨提示，我们不会以订单异常，系统升级为由要求您点击任何网址链接进行退款操作，保护资产，谨慎操作</span>
      </p>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.pay-result {
  padding: 100px 0;
  background-color: #fff;
  text-align: center;
  margin-top: 20px;

  .el-icon {
    font-size: 100px;
  }

  .green {
    color: #1dc779;
  }
  .red {
    color: $priceColor;
  }
  .tit {
    font-size: 24px;
  }
  .tip {
    color: #999;
  }

  p {
    line-height: 40px;
    font-size: 16px;
  }

  .btn {
    margin-top: 50px;
  }

  .alert {
    font-size: 12px;
    color: #999;
    margin-top: 50px;
  }
}

</style>